<script>
import {useRoute, useRouter} from 'vue-router'
import Navbar from "@/components/Navbar.vue";

export default {
  name: 'AppHeader',
  components: {Navbar},
  setup() {
    const route = useRoute() // this.$route
    const router = useRouter() // this.$router
    // const themeStore = useThemeStore()

    return {
      // ...toRefs(themeStore), // 变成响应式
      route,
    }
  },
  // mapState 是只读的,不能更改状态数据;mapWritableState 只允许修改数据
  methods: {
    translate() {
      if (this.$i18n.locale === 'en') {
        this.$i18n.locale = 'cn'
      } else {
        this.$i18n.locale = 'en'
      }
    },
  }
}
</script>

<template>
  <Navbar/>
  <!-- 显示路由内容 outlet -->
  <RouterView/>
</template>

<style scoped>
</style>
